/*主角移动和图片切换功能实现*/
document.addEventListener('DOMContentLoaded', function() {
  var character = document.getElementById('character');
  var cunzi = document.querySelector('.cunzi');
  var targetX = 500;
  var targetY = 500;
  
  function moveCharacter() {
    var startX = parseInt(character.style.left) || 0;
    var startY = parseInt(character.style.top) || 0;
    var deltaX = targetX - startX;
    var deltaY = targetY - startY;
    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    var speed = 3; // 设置角色移动速度
    var angle = Math.atan2(deltaY, deltaX);
  
  if (angle > -Math.PI / 4 && angle <= Math.PI / 4) {
    document.getElementById('right').style.display = 'block';
    document.getElementById('left').style.display = 'none';
    document.getElementById('down').style.display = 'none';
    document.getElementById('up').style.display = 'none';
  } else if (angle > Math.PI / 4 && angle <= 3 * Math.PI / 4) {
    document.getElementById('down').style.display = 'block';
    document.getElementById('up').style.display = 'none';
    document.getElementById('left').style.display = 'none';
    document.getElementById('right').style.display = 'none';
  } else if (angle > -3 * Math.PI / 4 && angle <= -Math.PI / 4) {
    document.getElementById('up').style.display = 'block';
    document.getElementById('down').style.display = 'none';
    document.getElementById('left').style.display = 'none';
    document.getElementById('right').style.display = 'none';
  } else {
    document.getElementById('left').style.display = 'block';
    document.getElementById('right').style.display = 'none';
    document.getElementById('down').style.display = 'none';
    document.getElementById('up').style.display = 'none';
  }
  
    if (distance >= speed) {
      var angle = Math.atan2(deltaY, deltaX);
      var newX = startX + speed * Math.cos(angle);
      var newY = startY + speed * Math.sin(angle);
      character.style.left = newX + 'px';
      character.style.top = newY + 'px';
      requestAnimationFrame(moveCharacter);
    } else {
      character.style.left = targetX + 'px';
      character.style.top = targetY + 'px';
    }
  }
  
  cunzi.addEventListener('click', function(event) {
    targetX = event.clientX - cunzi.getBoundingClientRect().left - character.offsetWidth / 2;
    targetY = event.clientY - cunzi.getBoundingClientRect().top - character.offsetHeight / 2;
    moveCharacter();
  });
  

  cunzi.addEventListener('click', function(event) {
    targetX = event.clientX - cunzi.getBoundingClientRect().left - character.offsetWidth / 2;
    targetY = event.clientY - cunzi.getBoundingClientRect().top - character.offsetHeight / 2;
    moveCharacter();
  });
});
// 获取所有 NPC 元素
var npcs = document.querySelectorAll('.cute');
npcs.forEach(function(npc) {
  npc.addEventListener('click', function() {
    var popupId = npc.id.replace('cute', 'popup');
    var popup = document.getElementById(popupId);
    if (popup) {
      // 显示对应的弹窗
      popup.style.display = 'block';
    }
  });
});

// 选择宠物的函数
function selectNPC(selectedId) {
  var popupId = selectedId.replace('cute', 'popup');
  var popup = document.getElementById(popupId);

  if (selectedId === 'cute1') {
    // 用户选择了第一个 NPC
    var notSelected2 = document.getElementById('cute2');
    var notSelected3 = document.getElementById('cute3');
    notSelected2.style.display = 'none';
    notSelected3.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    // 记录用户选择的宠物ID
    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  } else if (selectedId === 'cute2') {
    // 用户选择了第二个 NPC
    var notSelected1 = document.getElementById('cute1');
    var notSelected3 = document.getElementById('cute3');
    notSelected1.style.display = 'none';
    notSelected3.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  } else if (selectedId === 'cute3') {
    // 用户选择了第三个 NPC
    var notSelected1 = document.getElementById('cute1');
    var notSelected2 = document.getElementById('cute2');
    notSelected1.style.display = 'none';
    notSelected2.style.display = 'none';

    // 关闭弹窗
    closePopup(popupId);

    console.log('你选择了：' + selectedId);
    // 弹出选择结果提示框
    showResult(selectedId);
  }
}

// 关闭弹窗的函数
function closePopup(popupId) {
  var popup = document.getElementById(popupId);
  if (popup) {
    // 关闭对应的弹窗
    popup.style.display = 'none';
  }
}

// 弹出选择结果提示框的函数
function showResult(selectedId) {
  var resultBox = document.createElement('div');
  resultBox.innerHTML = selectedId + '已放入你的背包';
  resultBox.style.position = 'fixed';
  resultBox.style.top = '50%';
  resultBox.style.left = '50%';
  resultBox.style.transform = 'translate(-50%, -50%)';
  resultBox.style.padding = '20px';
  resultBox.style.backgroundColor = '#fff';
  resultBox.style.border = '1px solid #ccc';
  resultBox.style.boxShadow = '0 0 10px #ccc';
  resultBox.style.height='500px';
  resultBox.style.width='500px';
  resultBox.style.zIndex='999'
  document.body.appendChild(resultBox);

  setTimeout(function() {
    resultBox.parentNode.removeChild(resultBox);
  }, 3000);
}
//教程的轮播
// 弹出图片轮播弹窗
function showImageSliderPopup() {
  var imageSliderPopup = document.getElementById('imageSliderPopup');
  if (imageSliderPopup) {
    // 显示图片轮播弹窗
    imageSliderPopup.style.display = 'block';
    // 在这里可以编写图片轮播的逻辑
    // 比如利用 JavaScript 或者第三方库来实现图片的轮播效果
  }
}






const npc1 = document.getElementById("cute1");
const npc2 = document.getElementById("cute2");
const npc3 = document.getElementById("cute3");

npc1.style.animationDelay = "0s";
npc2.style.animationDelay = "0.15s";
npc3.style.animationDelay = "0.3s";
/*背景音乐的播放*/
var audio = document.getElementById("myAudio");
var button = document.getElementById("mc");

function toggleMusic() {
  if (audio.paused) {
    audio.play();
    button.style.backgroundImage = "url('../images/music1.png')";
  } else {
    audio.pause();
    button.style.backgroundImage = "url('../images/music0.png')";
  }
}
// 获取按钮元素
var helpButton = document.getElementById('help');
var whereButton = document.getElementById('where');
var bagButton = document.getElementById('bag');
var petButton = document.getElementById('pet');
var taskButton = document.getElementById('task');
var farmButton = document.getElementById('farm');
var shopButton = document.getElementById('shop');
var huntButton = document.getElementById('hunt');
var winButton = document.getElementById('win');
var bookButton = document.getElementById('book');


// 获取弹窗元素
var helpPopup = document.getElementById('helpPopup');
var wherePopup = document.getElementById('wherePopup');
var bagPopup = document.getElementById('bagPopup');
var petPopup = document.getElementById('petPopup');
var taskPopup = document.getElementById('taskPopup');
var farmPopup = document.getElementById('farmPopup');
var shopPopup = document.getElementById('shopPopup');
var huntPopup = document.getElementById('huntPopup');
var winPopup = document.getElementById('winPopup');
var bookPopup = document.getElementById('bookPopup');

// 获取关闭按钮元素
var closeButtons = document.getElementsByClassName('close-popup');

// 点击按钮显示对应的弹窗
helpButton.addEventListener('click', function() {
  helpPopup.style.display = 'block';
});

whereButton.addEventListener('click', function() {
  wherePopup.style.display = 'block';
});

bagButton.addEventListener('click', function() {
  bagPopup.style.display = 'block';
});

petButton.addEventListener('click', function() {
  petPopup.style.display = 'block';
});
taskButton.addEventListener('click', function() {
  taskPopup.style.display = 'block';
});
farmButton.addEventListener('click', function() {
  farmPopup.style.display = 'block';
});
  
shopButton.addEventListener('click', function() {
  shopPopup.style.display = 'block';
});
huntButton.addEventListener('click', function() {
  huntPopup.style.display = 'block';
});
winButton.addEventListener('click', function() {
  winPopup.style.display = 'block';
});
bookButton.addEventListener('click', function() {
  bookPopup.style.display = 'block';
});

// 点击关闭按钮关闭弹窗
for (var i = 0; i < closeButtons.length; i++) {
  closeButtons[i].addEventListener('click', function() {
    var popup = this.closest('.popupa');
    if (popup) {
      popup.style.display = 'none';
    }
  });
}
//加载动画
window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slide');
  var currentSlideIndex = 0;
  
  slides.forEach(function(slide) {
    slide.addEventListener('click', function(e) {
      e.preventDefault();
      
      var progressBar = document.createElement('div');
      progressBar.className = 'progress-bar';
      
      var progress = document.createElement('div');
      progress.className = 'progress';
      
      progressBar.appendChild(progress);
      document.body.appendChild(progressBar);
      
      var width = 1;
      var intervalId = setInterval(function() {
        if (width >= 100) {
          clearInterval(intervalId);
          // 跳转到index4页面
          window.location.href = slide.querySelector('a').getAttribute('href');
        } else {
          width++;
          progress.style.width = width + '%';
        }
      }, 10);

      // 图片轮流播放
      var images = ["/images/beimen.png", "/images/beimen1.png"];
      var imageTag = document.querySelector('.slide img');
      currentSlideIndex = (currentSlideIndex + 1) % images.length;
      imageTag.src = images[currentSlideIndex];
    });
  });
});
// 在跳转到index4时显示加载动画和弹出图片
function showModal(event) {
  event.preventDefault(); // 阻止默认跳转行为

  document.getElementById('loadingAnimation').style.display = 'block'; // 显示加载动画
  document.getElementById('popupImage').style.display = 'block'; // 显示弹出图片

  // 模拟加载过程，在实际情况中应该替换成实际的加载过程
  setTimeout(function() {
    // 隐藏加载动画和弹出图片
    document.getElementById('loadingAnimation').style.display = 'none';
    document.getElementById('popupImage').style.display = 'none';

    window.location.href = event.target.getAttribute('href'); // 完成加载后跳转
  }, 100000000); // 模拟3秒的加载时间
}




 //获取界面元素，当时不会封装，直接一个一个获取
 var tudi = document.querySelector(".tudi")
 var caidan = document.querySelector(".caidan")
 var shan = document.querySelector(".wai")
 var cai = document.querySelector(".cai")
 var cang_ku = []
 
 //浪费（忘记干嘛的了）
 var table_a = document.querySelector(".table_left")
 var table_b = document.querySelector(".table_zhong1")
 var table_c = document.querySelector(".table_zhong2")
 var table_d = document.querySelector(".table_right")
 
 //土地坐标（对着界面一个一个比划得出来的，现在想想那时候可真逗）
 var zuobiao2_list = {
     0: [691, 22],
     1: [790, 240],
     2: [686, 445],
     3: [738, 345], 
     4: [588, 243],
     5: [638, 132],
     6: [636, 340],
     7: [742, 137],
     8: [691, 232],
     
 }
 
 //土地用js的方法直接生成，不然就一个一个画
 function jia(num) {
     for (var i = 0; i < num; i++) {
         var one_div = document.createElement("div")
         one_div.setAttribute("sx", i)
         one_div.style.backgroundImage = "url(./nc/黑地.png)"
         one_div.style.left = zuobiao2_list[i][1] + "px"
         one_div.style.top = zuobiao2_list[i][0] + "px"
         one_div.setAttribute("onclick", "xxx(this)")
         one_div.status = "kong"
         tudi.append(one_div)
     }
 }
 jia(9)
 
 //植物列表
 var zuobiao_list = [69, 228, 389, 548]
 var caidan_list = ['樱桃', '番茄', '橘子', '茄子']
 //'0樱桃', '1番茄', '2橘子', '3茄子'
 
 //菜单生成
 function jia2(num) {
     for (var i = 0; i < num.length; i++) {
         var one_div = document.createElement("div")
         one_div.setAttribute("zx",i)
         one_div.setAttribute("onclick", "yyy(this,"+i+")")
         one_div.style.left = zuobiao_list[i] + "px"
         one_div.style.backgroundImage = "url(./nc/" + i + ".png)"
         caidan.append(one_div)
     }
 }
 jia2(caidan_list)
 
 //土地选中 kuai需要在这定义，放在前面会导致土地还未导入 数量为0
 var kuai = document.querySelectorAll(".tudi>div")
 function xxx(kuai_div) {
     for (var i = 0; i < kuai.length; i++) {
         if (kuai_div == kuai[i]) {
             kuai[i].className = 'xuan'
             if (kuai[i].status == 'kong') {
                 shan.style.display = 'none'
                 cai.style.display = 'none'
             }
             else if(kuai[i].status == 'zhang') {
                 shan.style.display = 'block'
             }else{
                 shan.style.display = 'block'
                 cai.style.display = 'block'
             }
         }
         else {
             kuai[i].className = ""
         }
     }
 }
 
 var str;
 //土地种菜
 function yyy(n,b) {
     for (var i = 0; i < kuai.length; i++) {
         var one_div = document.createElement("div")
         if (kuai[i].className == "xuan") {
             if (kuai[i].status == "kong") {
                 one_div.className = 'zhiwu'
                 kuai[i].append(one_div)
                 // 元素转换
                 str = kuai[i].innerHTML
                 // console.log(one_div)
                 // console.log(yyy)
                 //增加定时器
                 kuai[i].all_time = 1000
                 // kuai[i].all_time = b*20000+5000
                 kuai[i].start_time = 0
                 //显示铲除按钮
                 shan.style.display = 'block'
                 //改变状态
                 kuai[i].status = "zhang"
                 //改变当前土地的id 用于后面成熟切换图标
                 kuai[i].setAttribute('sx',n.getAttribute('zx'))
                 //计时器 倒计时
                 var dao_time=kuai[i].all_time - 0
                 dao_time = time(dao_time)
                 kuai[i].innerHTML = str + "<span>"+dao_time+"</span>"
             }
         }
     }
 }
 
 // 铲除植物
 function zzz() {
     for (var i = 0; i < kuai.length; i++) {
         if (kuai[i].className == "xuan") {
             kuai[i].innerHTML = ''
             kuai[i].status="kong"
             kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
             kuai[i].style.backgroundSize = "cover"
             shan.style.display = 'none'
             cai.style.display = 'none'
         }
     }
 }
 
 //采摘
 function ccc() {
     for (var i = 0; i < kuai.length; i++) {
         if (kuai[i].status == "chengshu" && kuai[i].className == "xuan") {
             var a = kuai[i].getAttribute("sx")
             caidan_list[a] 
             cang_ku.push(caidan_list[a])
             kuai[i].innerHTML = ''
             kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
             kuai[i].style.backgroundSize = "cover"
             cai.style.display = 'none'
             kuai[i].status = "kong"
             //仓库显示
             
         }
     }
     //产物的数量，当时本地存储都不会，刷新界面直接归零，所以这个游戏没法玩，看看就行了
     var a = 0
     var b = 0
     var c = 0 
     var d = 0 
     for(var j=0;j<cang_ku.length;j++){
         if(cang_ku[j] == "樱桃"){      
             a++
         }else if (cang_ku[j] == "番茄"){
             b++
         }else if (cang_ku[j] == "橘子"){
             c++
         }else if (cang_ku[j] == "茄子"){
             d++
         }
     }
     table_a.innerHTML="樱桃:"+a
     table_b.innerHTML="番茄:"+b
     table_c.innerHTML="橘子:"+c 
     table_d.innerHTML="茄子:"+d 
 }
 
 //定时器
 var game = setInterval(function () {
     for (var i = 0; i < kuai.length; i++) {
         if (kuai[i].status == "zhang") {
             if (kuai[i].start_time >= kuai[i].all_time) {
                 kuai[i].status = "chengshu"
                 kuai[i].innerHTML = str + "<span>可采摘</span>"
             } else {
                 kuai[i].start_time += 1000
                 var  dao_time =kuai[i].all_time - kuai[i].start_time
                 dao_time = time(dao_time)
                 kuai[i].innerHTML = str+"<span>"+dao_time+"</span>"
             }
         }
     }
 }, 1000);
 
 //时间标准化
 function time(n) {
     var miao_all = parseInt(n / 1000)
     var fen = parseInt(miao_all / 60)
     var miao = miao_all % 60
     if (fen < 10) {
         fen = "0" + fen
     }
     if (miao < 10) {
         miao = "0" + miao
     }
     var time = fen + ":" + miao
     return time
 }
 //延时器 
 setInterval(function() {
     for (var i = 0; i < kuai.length; i++) {
         if(kuai[i].status=="chengshu"){
             kuai[i].children[1].id="chengshu"
             // var one_div = document.createElement("div")
             // var a = kuai[i].getAttribute("sx")
             // one_div.style.backgroundImage = "url(./nc/" + a + ".png)"
             // one_div.style.width="100px"
             // one_div.style.height="100px"
             // kuai[i].append(one_div)
             // kuai[i].style.backgroundImage = "url(./nc/" + a + ".png)"
         }
     }
 }, 100);
 
 